@import "../../../../../styles/index";

.broadcast-input {

  // override vue-multiselect styles
  :global(.multiselect__element) { background-color: var(--dropdown-bg); }
  :global(.multiselect__element:nth-child(odd)) { background-color: var(--dropdown-alt-bg); }
  :global(.multiselect__option) { padding: 0; }

  :global(.multiselect__option--highlight) {
    background-color: var(--teal);
    color: var(--link-active);
  }
}

.broadcast {
  .flex();

  // add padding to all columns
  > div {
    .padding-v-sides(1);
    .padding-h-sides(0.5);

    padding-top: 10px;
  }

  // image column
  .col-image {
    flex: 0 0 76px;

    // 'img' is the preview image and 'div' is add-new rectangular icon
    > img,
    > div {
      .radius(0.5);

      width: 60px;
      height: 44px;
    }

    > div {
      border: 1px dashed var(--paragraph);
      position: relative;

      i {
        top: 11px;
        position: absolute;
        left: 19px;
        font-size: 21px;
      }
    }
  }

  // title and description column
  .col-description {
    min-width: 0;
    line-height: 23px;

    > div {
      overflow: hidden;
      text-overflow: ellipsis;
      &:first-child { color: var(--link-active); }
    }
  }

  // 'Create new' text
  &.new-broadcast .col-description {
    font-weight: bold;
    line-height: 44px;
  }

  // date column
  .col-date {
    flex: 0 0 80px;
    margin-left: auto;
    color: var(--link-active);
    font-size: smaller;
  }

}
